<template>
  <view class="pay">
    <div class="topNav">
      <u-swiper
        class="sh-m-b-20"
        :list="list1"
        height="200"
        keyName="image"
        showTitle
        circular
      ></u-swiper>
    </div>
    <div class="list flex">
      <div
        class="list_item"
        v-for="(item, index) in pay_list"
        :key="item.id"
        :class="{ chose_item: chosePay === index }"
        @click="selectItem(index)"
      >
        <view class="list_item_content">
          <div class="price">
            <em class="oldOP">￥{{ item.oprice }}</em>
            <div class="newOP">￥{{ item.price }}</div>
          </div>
          <div class="time flex">
            <p>{{ item.level_name }}</p>
            <p>{{ item.duration }}天</p>
          </div>
          <div class="desc">
            <p>{{ item.desc }}</p>
          </div>
        </view>
      </div>
    </div>
    <div class="pay_way">
      <div class="pay_way_item">
        <!-- <u-radio-group v-model="PaymentMethod" placement="row">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in pay_way" :key="item.id"
						:label="item.name" :name="item.name" :value="item.id">
					</u-radio>
				</u-radio-group> -->
        <u-radio-group
          v-model="PaymentMethod"
          :borderBottom="true"
          placement="column"
          iconPlacement="right"
          @change="groupChange"
        >
          <u-radio
            :customStyle="{ marginBottom: '16px' }"
            v-for="item in pay_way"
            :key="item.id"
            :value="item.id"
            :label="item.name"
            :name="item.id"
          >
          </u-radio>
        </u-radio-group>
        <!-- 	<u-row gutter="10">
					<u-col span="6" v-for="item in pay_way" :key="item.id">
						<u-button :type="item.id === 2 ? 'success' : 'primary'" :text="item.name" shape="circle" plain
							:icon="item.icon" iconColor="#fff" @click="payment(item.id)"></u-button>
					</u-col>
				</u-row> -->
      </div>
    </div>
    <div class="share">
      <u-button
        :disabled="payLoading"
        :loading="payLoading"
        type="success"
        text="立即支付"
        shape="circle"
        @click="payment"
        icon="rmb-circle"
      ></u-button>
      <u-button
        :disabled="payLoading"
        :loading="payLoading"
        class="mt_20"
        type="primary"
        text="分享给好友"
        shape="circle"
        @click="show = true"
        icon="weixin-fill"
      ></u-button>
      <u--text
        :text="`注：分享微信好友可领取三天会员，还可领取${
          9 - userInfo.share_vip_num
        }次。`"
        type="info"
      ></u--text>
    </div>
    <u-toast ref="uToast1" />
    <u-modal :show="show" title="提示" @confirm="shareWeChat">
      <view class="slot-content">
        分享给好友后，需好友点击查看即可领取三天会员权限
      </view>
    </u-modal>
    <u-loading-page :loading="pageLoading"></u-loading-page>
    <view v-if="payLoading" class="fixed_center">
      <u-loading-icon text="请稍等..."></u-loading-icon>
    </view>
  </view>
</template>

<script>
import { payConfig, rechargeVip, prepay, shareVip } from "@/common/api/index";
import divider from "@/components/divider/divider";
import globalFunc from "@/mixins/globalFunc.js";
export default {
  data() {
    return {
      pay_list: [], //订单数据
      pay_way: [], //支付方式列表
      chosePay: null, //选择支付金额下表
      PaymentMethod: null, //支付方式
      shareTime: 10, //分享剩余次数
      list1: [],
      pageLoading: true, //页面loading
      payLoading: false,
      show: false,
    };
  },
  mixins: [globalFunc],
  async onShow() {
    await this.payConfigGet();
    this.list1 = await this.banner("pay_page");
  },
  computed: {
    appData() {
      return this.$store.state.appData;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  methods: {
    // 列表接口
    async payConfigGet() {
      let res = await payConfig();
      if (res.code === 1) {
        this.pay_list = res.data.pay_list;
        this.pay_way = res.data.pay_way;
        this.pageLoading = false;
      } else {
        this.showMsg(res.msg);
      }
    },
    // 选择
    selectItem(index) {
      this.chosePay = index;
    },
    groupChange(n) {
      this.PaymentMethod = n;
    },
    // 支付
    async payment() {
      //  type是支付方式  2是微信   3是支付宝
      // this.PaymentMethod = type;
      console.log(typeof this.PaymentMethod);
      if (typeof this.chosePay != "number") {
        this.$refs.uToast1.show({
          message: "请选择需要充值会员金额",
          type: "error",
        });
        return;
      } else if (!this.PaymentMethod) {
        this.$refs.uToast1.show({
          message: "请选择支付方式",
          type: "error",
        });
        return;
      }
      this.payLoading = true;
      let formData = {
        id: this.pay_list[this.chosePay].id,
      };
      let res = await rechargeVip(formData);
      if (res.code === 1) {
        this.payForMoney(res.data);
      } else {
        this.showMsg(res.msg);
      }
    },
    async payForMoney(value) {
      let formData = {
        order_id: value.pay_order_id,
        pay_way: this.PaymentMethod,
        from: value.from,
        terminal: "6",
        from: value.from,
      };
      let res = await prepay(formData);
      if (res.code === 1) {
        if (this.PaymentMethod === 3) {
          this.AliPay(res.data);
        }
      } else {
        this.showMsg(res.msg);
      }
    },
    // 支付宝支付
    AliPay(value) {
      let that = this;
      uni.requestPayment({
        provider: "alipay",
        orderInfo: value.config, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
          that.$refs.uToast1.show({
            message: "支付成功",
            type: "success",
          });
          that.payLoading = false;
        },
        fail: function (err) {
          console.log(err.errMsg);
          let message = err.errMsg.slice(-6);
          that.$refs.uToast1.show({
            message: message,
            type: "error",
          });
          that.payLoading = false;
        },
      });
    },
    // 微信支付
    WeChatPay() {
      uni.requestPayment({
        provider: "wxpay",
        orderInfo: {
          appid: "wx499********7c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
          noncestr: "c5sEwbaNPiXAF3iv", // 随机字符串
          package: "Sign=WXPay", // 固定值
          partnerid: "148*****52", // 微信支付商户号
          prepayid: "wx202254********************fbe90000", // 统一下单订单号
          timestamp: 1597935292, // 时间戳（单位：秒）
          sign: "A842B45937F6EFF60DEC7A2EAA52D5A0", // 签名，这里用的 MD5/RSA 签名
        },
        success(res) {
          console.log(res, "success");
        },
        fail(e) {
          console.log(e, "fail");
        },
      });
    },
    // 微信分享
    shareWeChat() {
      let that = this;
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        href: `https://sf.giftwl.com/h5/?shareId=${that.userInfo.sn}`,
        title: that.appData.website.name,
        summary: that.appData.website.share_content,
        imageUrl: that.appData.website.logo,
        success: async function (res) {
          that.$refs.uToast1.show({
            message: "分享成功",
            type: "success",
          });
          console.log("success:+", res);
        },

        fail: function (err) {
          console.log("fail:+", err);
          that.$refs.uToast1.show({
            message: err,
            type: "error",
          });
        },
      });
      that.show = false;
    },
  },
};
</script>

<style scoped lang="scss">
.pay {
  background-color: #f8f8f8;
  padding: 20rpx 40rpx 50rpx;

  .topNav {
    border-radius: 40rpx;
  }

  .list {
    flex-wrap: wrap;
    justify-content: space-between;

    .list_item {
      width: 48%;
      margin-top: 30rpx;
      box-sizing: border-box;

      .list_item_content {
        padding: 50rpx 30rpx 20rpx;
        border-radius: 30rpx;
        text-align: center;
        background-color: #fff;

        .price {
          font-size: 40rpx;

          .oldOP {
            text-decoration: line-through;
          }

          .newOP {
            margin-top: 10rpx;
            color: #ff0000;
            font-size: 50rpx;
          }
        }

        .time {
          justify-content: center;
          margin-top: 20rpx;
          color: #666;
          font-size: 30rpx;

          p:first-child {
            margin-right: 10rpx;
          }
        }

        .desc {
          font-size: 30rpx;
          color: #666;
          margin-top: 20rpx;
        }
      }
    }

    .chose_item {
      border-radius: 30rpx;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      border: 1px solid #eee;
    }
  }

  .pay_way {
    margin-top: 50rpx;
  }

  .share {
    margin-top: 20rpx;
  }

  .mt_20 {
    margin-top: 20rpx;
  }

  .fixed_center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
